<template>
  <div class="com_list">
    <div v-if="list.length == 0 && num == 1" class="border_height">
      <van-empty description="没有数据" />
    </div>
    <div v-else>
      <div
        class="home_list"
        :class="[num == '1' ? 'border' : '']"
        v-for="(item, index) in NumList"
        @click="Ondetails(item.id)"
        :key="index"
      >
        <div class="home_img">
          <img v-if="item.img" :src="item.img[0]" alt />
          <p
            class="state"
            :class="[item.sellStage === '即将拍卖' ? 'soonGreen' : 'soonRed']"
          >{{ item.sellStage }}</p>
          <p class="discount" v-if="title != '自由购'">
            <span v-if="item.discount">{{ item.discount }}</span>
            <span>--</span>
            <br />折
          </p>
        </div>

        <div class="home_details">
          <p class="address">{{ item.title }}</p>
          <p class="details">
            {{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅 ·
            <span
              v-if="item.coveredArea"
            >{{ item.coveredArea }} ㎡ ·</span>
            <span v-else>-- ㎡</span>
            {{ item.directionName }}
          </p>
          <p>
            <span class="shooting">
              起拍:
              <span class="price">
                <span v-if="item.startSalePrice">{{ item.startSalePrice }}</span>
                <span v-else>--</span>万
              </span>
            </span>
            <span class="market">
              市场参考:
              <span v-if="item.marketSalePrice">{{ item.marketSalePrice }}</span>
              <span v-else>--</span>万
            </span>
          </p>
          <p class="shooting_time" v-if="item.startSaleTimeStr">
            <span class="title">开拍</span>
            <span class="time">{{ item.startSaleTimeStr }}</span>
          </p>
          <p class="shooting_text" v-else>开拍时间待定</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["num", "title", "list"],
  data() {
    return {
      start: "1",
      NumList: []
    };
  },
  watch: {
    list() {
      console.log("111", this.list);
      if (this.list) {
        this.list.forEach((item, index) => {
          item.img = item.imgUrl.split(",");
        });
        this.NumList = this.list;
        console.log(this.NumList);
      }
    }
  },
  mounted() {
    console.log(this.num, this.list.length);
  },
  methods: {
    Ondetails(item) {
      this.$router.push({ name: "MDetails", query: { id: item } });
    }
  }
};
</script>
<style lang="less" scoped>
.com_list {
  font-size: 0;
}
.border {
  border-bottom: 0.01rem solid #f8f8f8;
}
.border_height {
  min-height: 4.2rem;
}
.home_list {
  overflow: hidden;
  display: flex;
  padding: 0 0.15rem 0.23rem;
  &.border {
    padding: 0.2rem 0.15rem;
  }
  .home_img {
    position: relative;
    margin-right: 0.15rem;
    width: 1.05rem;
    img {
      // float: left;
      width: 1.05rem;
      height: 0.8rem;
      border-radius: 10px;
    }
    .state {
      position: absolute;
      top: 0;
      left: 0;
      // width: 0.52rem;
      // height: 0.16rem;
      padding: 0.05rem;
      border-radius: 10px 0px 10px 0px;
      text-align: center;
      line-height: 0.16rem;
      color: #fff;
      font-size: 0.1rem;
    }
    .soonGreen {
      background: linear-gradient(0deg, #19aa6b, #3cd6a2, #3cd8a4);
    }
    .soonRed {
      background: #d91615;
    }
    .discount {
      width: 0.2rem;
      height: 0.4rem;
      // line-height: 0.17rem;
      background: url("~@/assets/image/zk.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      text-align: center;
      left: 0.8rem;
      font-size: 0.1rem;
      color: #fff;
      top: 0;
    }
  }
  .home_details {
    font-size: 0.1rem;
    flex: 1;
    overflow: hidden;
    .address {
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 0.14rem;
      font-weight: bold;
      color: #343434;
    }
    .details {
      font-size: 0.12rem;
      color: #22242d;
      margin: 0.07rem 0;
    }
    .shooting {
      color: #f87254;
      margin-right: 0.05rem;
    }
    .price {
      font-size: 0.15rem;
    }
    .market {
      color: #9a9a9a;
    }
    .shooting_text {
      text-align: center;
      background: #f3f3f3;
      border-radius: 18px;
      padding: 0.02rem 0.09rem;
      margin-top: 0.08rem;
      width: 1.8rem;
    }
    .shooting_time {
      width: 1.8rem;
      height: 0.2rem;
      line-height: 0.2rem;
      background: #f3f3f3;
      border-radius: 18px;
      margin-top: 0.08rem;
      .title {
        color: #fff;
        background: #f5643e;
        padding: 0.03rem 0.09rem;
        border-radius: 18px 0px 0px 18px;
      }
      .time {
        color: #343434;
      }
    }
  }
}
</style>
